<template>
  <div style="position: relative">
    <div id="map-container" ref="mapContainer"></div>
    <div class="map-mark-text" v-if="flayoneShow">点击地图设置参考起飞点</div>
    <flaymap v-if="!flayoneShow"></flaymap>
    <linemap
      @viewClick="getviewClick"
      @mapsizeClick="getmapsizeClick"
    ></linemap>
  </div>
</template>
<script setup>
import { ref, watch, onMounted, onBeforeUnmount, defineProps } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';
import { ElIcon, ElInput, ElSelect } from 'element-plus';
import flaymap from './flaymap.vue';
import linemap from './linemap.vue';
const props = defineProps({
  showSearch: Boolean,
  flayShow: Boolean,
  flayoneShow: Boolean,
});
const emit = defineEmits(['delSetTakeoffMode', 'deloneSetTakeoffMode']);
const markers = ref([]); // 存储所有标记点
const polylines = ref([]); // 存储折线实例
const map = ref(null); // 地图实例
const mapContainer = ref(null);
const marker = ref(null);
const compassRef = ref(null);
// 存储起飞点 Marker
let takeoffMarker = null;
// 存储起飞点坐标
const takeoffPosition = ref({ lng: 0, lat: 0 });
// 存储起飞点相关元素
let takeoffElements = null;
let planeMarker = null;
let planePosition = { lng: 0, lat: 0, alt: 300 }; // 初始高度300米
let planeRotation = 0; // 初始朝向
const MOVE_STEP = 0.000003; // 大约0.3米的移动步长
const ALT_STEP = 5; // 高度变化步长(米)
const ROTATE_STEP = 5; // 旋转步长(度)
let flightPath = []; // 存储航点数组
let flightPolyline = null; // 飞行路径线段
let realtimePath = []; // 实时飞行轨迹
let realtimePolyline = null; // 实时飞行轨迹线段
let altitudeLine = null; // 高度指示线
let loca; // Loca容器实例
let floatingLineLayer; // 浮空线图层
let altitudeLines = []; // 存储所有高度指示线
let polylineLayer; // 添加缺失的变量声明
const features = ref([
  {
    strokeWeight: 2,
    strokeColor: '#19A4EB',
    strokeOpacity: 0.8,
    name: '巡逻',
    desc: '未命名标注描述',
    path: [
      {
        Q: 30.251848542385925,
        R: 119.90495293244715,
        lng: 119.904953,
        lat: 30.251849,
      },
    ],
    type: 'Polyline',
  },
]);
// 创建飞机标记
const createPlaneMarker = (AMap) => {
  // 使用自定义图标
  planeMarker = new AMap.Marker({
    position: [planePosition.lng, planePosition.lat],
    icon: new AMap.Icon({
      image: '/static/flay.svg', // 替换为你的飞机图标
      size: new AMap.Size(40, 40),
      imageSize: new AMap.Size(40, 40),
    }),
    offset: new AMap.Pixel(-20, -20),
    angle: planeRotation,
    autoRotation: false,
    map: map.value,
  });

  // 设置3D高度
  planeMarker.setPosition([
    planePosition.lng,
    planePosition.lat,
    planePosition.alt,
  ]);
};
// 初始化键盘控制
const initKeyboardControls = () => {
  const keyActions = {
    w: () => movePlane('forward'),
    s: () => movePlane('backward'),
    a: () => movePlane('left'),
    d: () => movePlane('right'),
    c: () => movePlane('up'),
    z: () => movePlane('down'),
    q: () => rotatePlane('left'),
    e: () => rotatePlane('right'),
    ' ': () => addWaypoint(), // 空格键添加航点
  };
  document.addEventListener('keydown', (e) => {
    const key = e.key.toLowerCase();
    if (keyActions[key]) {
      keyActions[key]();
      e.preventDefault(); // 阻止默认行为
    }
  });
};

// 移动飞机
const movePlane = (direction) => {
  const radian = (planeRotation * Math.PI) / 180; // 转换为弧度
  // 记录移动前位置
  const prevPosition = { ...planePosition };
  switch (direction) {
    case 'forward':
      planePosition.lng += MOVE_STEP * Math.sin(radian);
      planePosition.lat += MOVE_STEP * Math.cos(radian);
      break;
    case 'backward':
      planePosition.lng -= MOVE_STEP * Math.sin(radian);
      planePosition.lat -= MOVE_STEP * Math.cos(radian);
      break;
    case 'left':
      planePosition.lng -= MOVE_STEP * Math.cos(radian);
      planePosition.lat += MOVE_STEP * Math.sin(radian);
      break;
    case 'right':
      planePosition.lng += MOVE_STEP * Math.cos(radian);
      planePosition.lat -= MOVE_STEP * Math.sin(radian);
      break;
    case 'up':
      planePosition.alt += ALT_STEP;
      break;
    case 'down':
      planePosition.alt = Math.max(0, planePosition.alt - ALT_STEP);
      break;
  }

  // 更新实时轨迹
  updateRealtimePath(prevPosition);
  // 更新高度指示线
  updateAltitudeLine();
  // 更新飞机位置
  updatePlanePosition();
};
// 更新实时飞行轨迹
const updateRealtimePath = (prevPosition) => {
  // 添加当前位置到实时轨迹
  realtimePath.push([planePosition.lng, planePosition.lat, planePosition.alt]);
  // 如果还没有实时轨迹线段，创建它
  if (!realtimePolyline) {
    realtimePolyline = new AMap.Polyline({
      path: realtimePath,
      strokeColor: '#FF33FF', // 紫色虚线
      strokeOpacity: 0.8,
      strokeWeight: 2,
      strokeStyle: 'dashed', // 虚线
      lineJoin: 'round',
      lineCap: 'round',
      zIndex: 40,
      map: map.value,
    });
  } else {
    // 更新现有线段
    realtimePolyline.setPath(realtimePath);
  }
};

// 更新高度指示线
const updateAltitudeLine = () => {
  // 地面点(与飞机同经纬度，高度为0)
  const groundPoint = [planePosition.lng, planePosition.lat, 0];
  // 飞机当前位置
  const planePoint = [planePosition.lng, planePosition.lat, planePosition.alt];

  if (!altitudeLine) {
    // 创建高度指示线
    altitudeLine = new AMap.Polyline({
      path: [groundPoint, planePoint],
      strokeColor: '#00AAFF', // 蓝色虚线
      strokeOpacity: 0.6,
      strokeWeight: 1,
      strokeStyle: 'dashed', // 虚线
      lineJoin: 'round',
      lineCap: 'round',
      zIndex: 30,
      map: map.value,
    });
  } else {
    // 更新现有高度线
    altitudeLine.setPath([groundPoint, planePoint]);
  }
};
// 旋转飞机
const rotatePlane = (direction) => {
  if (direction === 'left') {
    planeRotation -= ROTATE_STEP;
  } else {
    planeRotation += ROTATE_STEP;
  }

  // 确保角度在0-360度之间
  planeRotation = (planeRotation + 360) % 360;

  planeMarker.setAngle(planeRotation);
};

// 更新飞机位置
const updatePlanePosition = () => {
  planeMarker.setPosition([
    planePosition.lng,
    planePosition.lat,
    planePosition.alt,
  ]);
  map.value.setCenter([planePosition.lng, planePosition.lat]);
};
// 添加航点
const addWaypoint = () => {
  // 记录当前飞机位置
  flightPath.push({
    lng: planePosition.lng,
    lat: planePosition.lat,
    alt: planePosition.alt,
  });

  // 更新飞行路径
  updateFlightPath();

  // 添加航点标记
  addWaypointMarker();

  // 重置实时轨迹，从当前点重新开始记录
  realtimePath = [[planePosition.lng, planePosition.lat, planePosition.alt]];
  if (realtimePolyline) {
    realtimePolyline.setPath(realtimePath);
  }
};

// 更新飞行路径线段
const updateFlightPath = () => {
  if (flightPath.length < 2) return;

  // 转换坐标格式
  const path = flightPath.map((point) => [point.lng, point.lat, point.alt]);

  // 移除旧的线段
  if (flightPolyline) {
    map.value.remove(flightPolyline);
  }

  // 创建新的线段
  flightPolyline = new AMap.Polyline({
    path: path,
    isOutline: true,
    outlineColor: '#ffeeff',
    borderWeight: 1,
    strokeColor: '#3366FF',
    strokeOpacity: 1,
    strokeWeight: 3,
    strokeStyle: 'solid',
    lineJoin: 'round',
    lineCap: 'round',
    zIndex: 50,
    map: map.value,
  });
};

// 添加航点标记（使用Loca实现）
const addWaypointMarker = () => {
  const lastPoint = flightPath[flightPath.length - 1];

  // 检查Loca是否可用
  if (!window.Loca || !loca) {
    console.error('Loca未初始化，无法添加航点标记');
    return;
  }

  // 1. 用Loca.PointLayer添加航点（性能更优）
  const markerLayer = new window.Loca.PointLayer({
    zIndex: 200,
    opacity: 1,
  });

  markerLayer.setSource(
    new window.Loca.GeoJSONSource({
      data: {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [lastPoint.lng, lastPoint.lat],
            },
            properties: {
              altitude: lastPoint.alt, // 高度属性
            },
          },
        ],
      },
    }),
  );

  markerLayer.setStyle({
    unit: 'meter',
    altitude: (d) => d.properties.altitude, // 设置高度
    icon: {
      src: 'path/to/mark.svg', // 建议使用在线URL
      size: [20, 20],
      anchor: 'bottom-center',
    },
  });
  loca.add(markerLayer);

  // 2. 创建高度指示虚线（使用Loca）
  const line = new window.Loca.PolylineLayer({
    zIndex: 90,
    opacity: 0.6,
  });

  line.setSource(
    new window.Loca.GeoJSONSource({
      data: {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            geometry: {
              type: 'LineString',
              coordinates: [
                [lastPoint.lng, lastPoint.lat, lastPoint.alt], // 航点位置
                [lastPoint.lng, lastPoint.lat, 0], // 地面位置
              ],
            },
          },
        ],
      },
    }),
  );

  line.setStyle({
    height: (d) => d.geometry.coordinates[2], // 动态高度
    width: 1,
    color: '#FF0000',
    dashArray: [10, 5], // 虚线样式（实线10px，间隔5px）
  });
  loca.add(line);
  altitudeLines.push(line); // 存储引用

  // 3. 更新浮空线路径
  updateFloatingLine();
};
// 更新浮空线路径
const updateFloatingLine = () => {
  // 检查Loca是否可用
  if (!window.Loca || !floatingLineLayer) {
    console.error('Loca或浮空线图层未初始化');
    return;
  }

  // 检查飞行路径数据
  if (flightPath.length === 0) {
    console.warn('飞行路径为空，无法更新浮空线');
    return;
  }

  const lineData = {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        geometry: {
          type: 'LineString',
          coordinates: flightPath.map((p) => [p.lng, p.lat, p.alt]),
        },
      },
    ],
  };

  console.log('更新浮空线数据:', lineData);

  try {
    floatingLineLayer.setSource(
      new window.Loca.GeoJSONSource({ data: lineData }),
    );
    floatingLineLayer.setStyle({
      height: (d) => d.geometry.coordinates[2],
      width: 4,
      color: '#3388FF',
      dashArray: [15, 5], // 更明显的虚线
    });
    console.log('浮空线更新成功');
  } catch (error) {
    console.error('浮空线更新失败:', error);
  }
};

// 初始化地图
const initMap = async () => {
  try {
    // 第一步：加载基础AMap
    const AMap = await AMapLoader.load({
      key: '4382d57ce20d54c12e3c78ae23f76876',
      version: '2.0',
      plugins: [
        'AMap.PlaceSearch',
        'AMap.Geocoder',
        'AMap.AutoComplete',
        'AMap.ToolBar',
        'AMap.Scale',
        'AMap.Marker',
        'AMap.Geolocation',
        'AMap.Polyline',
        'AMap.BasicControl',
        'AMap.GetRotation',
        'AMap.ControlBar',
        'AMap.SetPitch',
      ],
      features: ['bg', 'building'],
    });

    // 创建地图实例
    map.value = new AMap.Map(mapContainer.value, {
      zoom: 18,
      center: [119.904953, 30.251849], //默认中心点
      viewMode: '3D',
      pitch: 50,
      layers: [new AMap.TileLayer.Satellite()],
    });

    if (!window.Loca) {
      await new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src =
          'https://webapi.amap.com/loca?v=2.0&key=4382d57ce20d54c12e3c78ae23f76876';
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
      });
    }
    // 2. 用 window.Loca 创建实例
    const loca = new window.Loca.Container({ map: map.value });
    flayLine(loca);
    // 如果起飞点未设置，则进入设置起飞点模式
    if (props.flayoneShow == true) {
      oneSetTakeoffMode();
    }
  } catch (error) {
    console.error('地图初始化失败:', error);
  }
};
// 设置浮空线段
const flayLine = (locaInstance) => {
  if (window.Loca && locaInstance) {
    // 创建 LineLayer（浮空线段）
    const lineLayer = new window.Loca.LineLayer({
      zIndex: 100, // 确保图层在上层
    });

    // 创建辅助线图层
    const guideLineLayer = new window.Loca.LineLayer({
      zIndex: 50, // 确保辅助线在底层但可见
    });

    // 创建圆点图层（用于显示底部圆点）
    const pointLayer = new window.Loca.PointLayer({
      zIndex: 60, // 确保圆点在辅助线上方
    });

    // 创建图标图层（用于显示底部有背景的图标）
    const iconLayer = new window.Loca.PointLayer({
      zIndex: 55, // 确保图标在辅助线上方，圆点下方
    });

    // 设置 LineLayer 数据源
    lineLayer.setSource(
      new window.Loca.GeoJSONSource({
        data: {
          type: 'FeatureCollection',
          features: [],
        },
      }),
    );
    // 设置辅助线图层数据源
    guideLineLayer.setSource(
      new window.Loca.GeoJSONSource({
        data: {
          type: 'FeatureCollection',
          features: [],
        },
      }),
    );
    // 设置圆点图层数据源
    pointLayer.setSource(
      new window.Loca.GeoJSONSource({
        data: {
          type: 'FeatureCollection',
          features: [],
        },
      }),
    );
    // 设置图标图层数据源
    iconLayer.setSource(
      new window.Loca.GeoJSONSource({
        data: {
          type: 'FeatureCollection',
          features: [],
        },
      }),
    );
    // 设置 LineLayer 样式 浮空线段样式
    lineLayer.setStyle({
      altitude: true, // 启用高度
      lineWidth: 5, // 线段宽度
      color: '#00d58f', // 颜色属性名改为 color
    });
    // 设置辅助线样式 辅助线样式
    guideLineLayer.setStyle({
      altitude: true, // 启用高度
      lineWidth: 3, // 线段宽度
      color: '#f4ed7c', // 颜色属性名改为 color
      opacity: 0.8,
    });
    // 设置圆点样式
    pointLayer.setStyle({
      radius: 2, // 圆点半径
      color: '#f0ed7a', // 圆点颜色
      borderWidth: 2, // 边框宽度
      borderColor: '#ffffff', // 边框颜色
    });
    // 设置图标样式
    iconLayer.setStyle({
      radius: 12, // 图标背景半径
      color: '#fff', // 图标背景颜色
      borderWidth: 2, // 边框宽度
      borderColor: '#ffffff', // 边框颜色
      // 可以添加图标属性
      icon: {
        type: 'image',
        src: '/static/flay.png',
        size: [16, 16], // 图标大小
        anchor: 'center', // 图标锚点
      },
    });

    // 将图层添加到loca容器
    locaInstance.add(lineLayer);
    locaInstance.add(guideLineLayer);
    locaInstance.add(pointLayer);
    locaInstance.add(iconLayer);

    // 保存图层引用到全局变量
    window.lineLayer = lineLayer;
    window.guideLineLayer = guideLineLayer;
    window.pointLayer = pointLayer;
    window.iconLayer = iconLayer;
  } else {
    console.error('flayLine 条件不满足:');
    console.error('window.Loca:', window.Loca);
    console.error('locaInstance:', locaInstance);
  }
};
// 设置一次起飞点
const oneSetTakeoffMode = () => {
  map.value.getContainer().style.cursor = `url('/static/flay.png'), auto`; // 修改鼠标样式为飞机图标;
  map.value.on('click', oneMapClickForTakeoff); // 监听地图点击事件
};
// 起飞点设置
const enterSetTakeoffMode = () => {
  map.value.getContainer().style.cursor = `url('/static/flay.png'), auto`; // 修改鼠标样式为飞机图标;
  map.value.on('click', handleMapClickForTakeoff); // 监听地图点击事件
};
// 在地图上点击设置一次起飞点
const oneMapClickForTakeoff = (e) => {
  const lnglat = e.lnglat;
  const lng = lnglat.getLng();
  const lat = lnglat.getLat();
  const defaultHeight = 200; // 默认高度200米
  const takeoffPosition = [lnglat.getLng(), lnglat.getLat(), defaultHeight];

  // 创建新的起飞点 Marker（地面标记）
  takeoffMarker = new AMap.Marker({
    position: lnglat,
    map: map.value,
    content: `<img src="/static/flay.png" width="24" height="24" />`, // 自定义飞机图标
    draggable: true, // 启用拖拽功能
    cursor: 'move', // 鼠标悬停时显示移动光标
    raiseOnDrag: true, // 拖拽时标记浮于其他标记之上
    zIndex: 1000,
  });

  const verticalLine = new AMap.Polyline({
    path: [
      [lng, lat, 0], // 地面点
      [lng, lat, defaultHeight], // 空中点
    ],
    strokeColor: '#FF33FF', // 颜色可自定义
    strokeOpacity: 0.8,
    strokeWeight: 3,
    strokeStyle: 'solid',
    zIndex: 999,
    map: map.value,
  });

  // 创建空中飞机图标
  const airPlaneMarker = new AMap.Marker({
    position: takeoffPosition,
    map: map.value,
    content: `<img src="/static/flay.png" width="32" height="32" style="opacity: 0.8;" />`, // 空中飞机图标
    zIndex: 1001,
  });

  // 创建水平浮空线（在空中高度）
  const horizontalLine = new AMap.Polyline({
    path: [
      [lnglat.getLng() - 0.001, lnglat.getLat(), defaultHeight], // 左侧点
      [lnglat.getLng() + 0.001, lnglat.getLat(), defaultHeight], // 右侧点
    ],
    strokeColor: '#FF33FF', // 紫色
    strokeOpacity: 0.6,
    strokeWeight: 3,
    strokeStyle: 'solid', // 实线
    lineJoin: 'round',
    lineCap: 'round',
    zIndex: 998,
    map: map.value,
  });

  // 监听拖拽事件
  takeoffMarker.on('dragend', (e) => {
    const newPosition = e.target.getPosition();
    const newTakeoffPosition = [
      newPosition.getLng(),
      newPosition.getLat(),
      defaultHeight,
    ];

    // 更新空中飞机位置
    airPlaneMarker.setPosition(newTakeoffPosition);

    // 更新垂直浮空线
    verticalLine.setPath([
      [newPosition.getLng(), newPosition.getLat(), 0],
      newTakeoffPosition,
    ]);

    // 更新水平浮空线
    horizontalLine.setPath([
      [newPosition.getLng() - 0.001, newPosition.getLat(), defaultHeight],
      [newPosition.getLng() + 0.001, newPosition.getLat(), defaultHeight],
    ]);

    console.log('起飞点新位置:', newPosition.getLng(), newPosition.getLat());
    // 更新存储的坐标
    takeoffPosition.value = {
      lng: newPosition.getLng(),
      lat: newPosition.getLat(),
    };
  });

  // 存储起飞点相关元素
  takeoffElements = {
    groundMarker: takeoffMarker,
    airPlaneMarker: airPlaneMarker,
    verticalLine: verticalLine,
    horizontalLine: horizontalLine,
  };

  exitoneSetTakeoffMode();
  console.log('起飞点坐标:', takeoffMarker, lnglat.getLng(), lnglat.getLat()); //可以在这里存储起飞点坐标;
};
// 在地图上点击设置起飞点
const handleMapClickForTakeoff = (e) => {
  const lnglat = e.lnglat;
  const defaultHeight = 200; // 默认高度200米
  const takeoffPosition = [lnglat.getLng(), lnglat.getLat(), defaultHeight];

  // 移除旧的起飞点相关元素（如果存在）
  if (takeoffElements) {
    map.value.remove(takeoffElements.groundMarker);
    map.value.remove(takeoffElements.airPlaneMarker);
    map.value.remove(takeoffElements.verticalLine);
    map.value.remove(takeoffElements.horizontalLine);
  }

  // 创建新的起飞点 Marker（地面标记）
  takeoffMarker = new AMap.Marker({
    position: lnglat,
    map: map.value,
    content: `<img src="/static/flay.png" width="24" height="24" />`, // 自定义飞机图标
    draggable: true, // 启用拖拽功能
    cursor: 'move', // 鼠标悬停时显示移动光标
    raiseOnDrag: true, // 拖拽时标记浮于其他标记之上
    zIndex: 1000,
  });
  // 创建垂直浮空线（从地面到空中）
  takeoffElements = new AMap.Polyline({
    path: [
      [lnglat.getLng(), lnglat.getLat(), 0], // 地面点
      [lnglat.getLng(), lnglat.getLat(), defaultHeight], // 空中点
    ],
    strokeColor: '#FF33FF', // 你想要的颜色
    strokeOpacity: 0.8,
    strokeWeight: 3,
    strokeStyle: 'solid',
    zIndex: 999,
    map: map.value,
  });

  // 创建空中飞机图标
  const airPlaneMarker = new AMap.Marker({
    position: takeoffPosition,
    map: map.value,
    content: `<img src="/static/flay.png" width="32" height="32" style="opacity: 0.8;" />`, // 空中飞机图标
    zIndex: 1001,
  });

  // 创建垂直浮空线（从地面到空中）
  const verticalLine = new AMap.Polyline({
    path: [
      [lnglat.getLng(), lnglat.getLat(), 0], // 地面点
      takeoffPosition, // 空中点
    ],
    strokeColor: '#00AAFF', // 蓝色
    strokeOpacity: 0.8,
    strokeWeight: 2,
    strokeStyle: 'dashed', // 虚线
    lineJoin: 'round',
    lineCap: 'round',
    zIndex: 999,
    map: map.value,
  });

  // 创建水平浮空线（在空中高度）
  const horizontalLine = new AMap.Polyline({
    path: [
      [lnglat.getLng() - 0.001, lnglat.getLat(), defaultHeight], // 左侧点
      [lnglat.getLng() + 0.001, lnglat.getLat(), defaultHeight], // 右侧点
    ],
    strokeColor: '#FF33FF', // 紫色
    strokeOpacity: 0.6,
    strokeWeight: 3,
    strokeStyle: 'solid', // 实线
    lineJoin: 'round',
    lineCap: 'round',
    zIndex: 998,
    map: map.value,
  });

  // 监听拖拽事件
  takeoffMarker.on('dragend', (e) => {
    const newPosition = e.target.getPosition();
    const newTakeoffPosition = [
      newPosition.getLng(),
      newPosition.getLat(),
      defaultHeight,
    ];

    // 更新空中飞机位置
    airPlaneMarker.setPosition(newTakeoffPosition);

    // 更新垂直浮空线
    verticalLine.setPath([
      [newPosition.getLng(), newPosition.getLat(), 0],
      newTakeoffPosition,
    ]);

    // 更新水平浮空线
    horizontalLine.setPath([
      [newPosition.getLng() - 0.001, newPosition.getLat(), defaultHeight],
      [newPosition.getLng() + 0.001, newPosition.getLat(), defaultHeight],
    ]);

    console.log('起飞点新位置:', newPosition.getLng(), newPosition.getLat());
    // 更新存储的坐标
    takeoffPosition.value = {
      lng: newPosition.getLng(),
      lat: newPosition.getLat(),
    };
  });

  // 存储起飞点相关元素
  takeoffElements = {
    groundMarker: takeoffMarker,
    airPlaneMarker: airPlaneMarker,
    verticalLine: verticalLine,
    horizontalLine: horizontalLine,
  };

  // 重设完成后，通知父组件退出设置模式
  exitSetTakeoffMode();
  console.log('起飞点坐标:', takeoffMarker, lnglat.getLng(), lnglat.getLat()); // 可以在这里存储起飞点坐标（如发送到后端或存入 Vuex/Pinia）
};
// 退出"首次设置起飞点"模式
const exitoneSetTakeoffMode = () => {
  emit('deloneSetTakeoffMode', false);
  map.value.getContainer().style.cursor = 'default'; // 恢复鼠标样式
  map.value.off('click', oneMapClickForTakeoff);

  // 存储初始起飞点坐标
  takeoffPosition.value = {
    lng: takeoffMarker.getPosition().getLng(),
    lat: takeoffMarker.getPosition().getLat(),
  };
  console.log('起飞点初始坐标:', takeoffPosition.value);
};
// 退出"设置起飞点"模式
const exitSetTakeoffMode = () => {
  emit('delSetTakeoffMode', true);
  map.value.getContainer().style.cursor = 'default'; // 恢复鼠标样式
  map.value.off('click', handleMapClickForTakeoff); // 移除地图点击监听
};

// 开始拖动指南针
let startRotation = 0;
let startX = 0;
let startY = 0;
const startDrag = (event) => {
  if (event.type === 'touchstart') {
    startX = event.touches[0].clientX;
    startY = event.touches[0].clientY;
  } else {
    startX = event.clientX;
    startY = event.clientY;
  }
  startRotation = map.getRotation();

  document.addEventListener('mousemove', dragMove);
  document.addEventListener('mouseup', stopDrag);
  document.addEventListener('touchmove', dragMove);
  document.addEventListener('touchend', stopDrag);
};

// 拖动过程中更新地图旋转角度
const dragMove = (event) => {
  let deltaX, deltaY;
  if (event.type === 'touchmove') {
    deltaX = event.touches[0].clientX - startX;
    deltaY = event.touches[0].clientY - startY;
  } else {
    deltaX = event.clientX - startX;
    deltaY = event.clientY - startY;
  }
  const rotation = startRotation + deltaY; // 可根据需要调整计算方式
  map.setRotation(rotation);
};

// 停止拖动
const stopDrag = () => {
  document.removeEventListener('mousemove', dragMove);
  document.removeEventListener('mouseup', stopDrag);
  document.removeEventListener('touchmove', dragMove);
  document.removeEventListener('touchend', stopDrag);
};

// 清除所有覆盖物
const clearAll = () => {
  // 清除折线
  if (polylines.value.length > 0) {
    polylines.value.forEach((polyline) => {
      polyline.setMap(null);
    });
    polylines.value = [];
  }

  // 清除标记
  if (markers.value.length > 0) {
    markers.value.forEach((marker) => {
      marker.setMap(null);
    });
    markers.value = [];
  }

  // 清除起飞点相关元素
  if (takeoffElements) {
    map.value.remove(takeoffElements.groundMarker);
    map.value.remove(takeoffElements.airPlaneMarker);
    map.value.remove(takeoffElements.verticalLine);
    map.value.remove(takeoffElements.horizontalLine);
    takeoffElements = null;
  }
};
// 获取地图视角
const getviewClick = (value) => {
  map.value.setPitch(value ? 50 : 0);
};
// 获取地图尺寸
const getmapsizeClick = (operation) => {
  if (map.value) {
    let currentZoom = map.value.getZoom(); // 获取当前地图缩放级别
    const zoomChange = operation === 'add' ? 0.1 : -0.1; // 每次点击缩放变化量，可根据需要调整
    map.value.setZoomAndCenter(currentZoom + zoomChange, map.value.getCenter()); // 设置新的缩放级别，同时保持当前地图中心不变
  }
};
watch(
  () => props.flayShow,
  (newVal, oldVal) => {
    if (newVal === false) {
      enterSetTakeoffMode(); // 进入重设模式
    } else {
      map.value.getContainer().style.cursor = 'default'; // 恢复鼠标样式
      map.value.off('click', handleMapClickForTakeoff); // 移除地图点击监听
    }
  },
);
// 生命周期
onMounted(() => {
  initMap();
});

onBeforeUnmount(() => {
  clearAll(); // 清理地图
  if (map.value) {
    // 重置鼠标光标样式
    map.value.getContainer().style.cursor = 'default';
    map.value.destroy();
  }
});
</script>

<style scoped lang="scss">
#map-container {
  width: 100%;
  height: calc(100vh - 110px);
}

.map-mark-text {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 999;
  width: 40vh;
  height: 8vh;
  font-size: 14px;
  line-height: 8vh;
  color: #fff;
  text-align: center;
  background: rgb(0 0 0 / 65%);
  border-radius: 4px;
  transform: translate(-50%, -50%); /* 添加transform */
}
</style>
